<template>
    <div class="detail-rules">
        <detail-section title="预定须知">
            <div class="rules-inner">
                <template v-for="item in rulesData">
                    <div class="item">
                        <span class="title">{{ item.title }}</span>
                        <span class="intro">{{ item.introduction }}</span>
                        <span class="tip" v-if="item.tips">查看说明</span>
                    </div>
                </template>
            </div>
        </detail-section>
    </div>
</template>

<script setup>
    import detailSection from "@/components/detail-section/detail-section.vue";

    defineProps({
        rulesData:{
            type:Array,
            default:() => []
        }
    })
</script>


<style lang='less' scoped>
.rules-inner {
    .item {
        display: flex;
        align-items: center;
        font-size: 13px;
        color: #333;
        margin: 20px 0;
        .title {
            width: 20%;
            color: #888;
        }
        .intro {
            flex: 1;
        }
    }
}
</style>